<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>增加用户功能</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form" style="padding: 20px" method="post" enctype="multipart/form-data" id="userForm">
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" id="uname" name="uname" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" id="realname" name="realname" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日:</label>
        <div class="layui-input-block">
            <input type="text" id="birthday" name="birthday" required  lay-verify="required" placeholder="请输入生日" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label userStatus">状态</label>
        <div class="layui-input-block" id="userStatus">
            <input type="checkbox" name="available" id="available"  lay-skin="switch" lay-text="启用|禁用" value="1" checked lay-filter="cx">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-block">
            <select id="deptid" lay-verify="required" name="dept.deptid">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像:</label>
        <button type="button" class="layui-btn" id="headimg">
            <i class="layui-icon">&#xe67c;</i>上传头像
        </button>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <img id="userImage" width="150px" height="150px" src="/static/layui/images/wu.png">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="userAdd" id="addBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/layui/layui/layui.js"></script>
<script>
    layui.use(['form','layer','laydate','table','laytpl','upload'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table,
            upload=layui.upload;

        //绑定时间插件到生日文本框中
        laydate.render({
            elem:'#birthday',
            theme: 'grid'
        });
        var av=form.on('switch(cx)', function(data){
            cx=1-$("#available").val();
            $("#available").val(cx);
            console.log(cx);

        });


        //文件上传
        upload.render({
            elem:'#headimg',
            url:'/user/addUser',
            auto:false,
//            bindAction:'#addBtn',
            before:function (obj) {
                this.data={
                    uname:$("#uname").val(),
                    password:$("#password").val(),
                    realname:$("#realname").val(),
                    birthday:$("#birthday").val(),
                    deptid:$("#deptid").val(),
                    available:$('#available').val()

            };
                console.log(this.data);
            },
            choose:function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#userImage').attr('src', result); //图片链接（base64）
                });
            },
            done:function (obj) {

            }
        });


        $.ajax({
            url:'/user/selectDept',
            type:'GET',
            success:function (res) {
                for(var i=0;i<res.length;i++){
                    var optionitem=$("<option></option>");
                    optionitem.attr("value",res[i].deptid);
                    optionitem.append(res[i].deptname);
                    $("#deptid").append(optionitem);
                }
                form.render('select'); //刷新select选择框渲染
            }
        });
        //提交表单
        form.on("submit(userAdd)",function(data) {
            console.log("我在呢")
            console.log(data)
            var formData = new FormData($("#userForm")[0]);
            $.ajax({
                cache: true,
                type: "post",
                url: "/user/addUser",
                async: false,
                data: formData,  // 你的formid
                contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                success: function (res) {
                    console.log("为啥没关")
                    if(res.code==200){
                        layui.layer.msg(res.msg);
                        //关闭窗口ifram
                        var index1=parent.layer.getFrameIndex(window.name)
                        setTimeout(function () {
                            parent.layer.close(index1);
                            window.parent.location.reload();
                        },1000)
                    }else if(res.code==-200){
                        layui.layer.msg(res.msg);
                        //关闭窗口ifram
                        var index1=parent.layer.getFrameIndex(window.name)
                        setTimeout(function () {
                            parent.layer.close(index1);
                        },1000)
                    }
                }
            })
            return false;
        });

    })
</script>
</body>
</html>